<template>
  <div class="container">
    <el-header>
      <h3>分校设置</h3>
    </el-header>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      >
      <el-table-column
        prop="school_name"
        label="分校名称"
      >
      </el-table-column>
      <el-table-column
        prop="school_address"
        label="分校具体地址"
      >
      </el-table-column>
      <el-table-column
        prop="school_subject_two"
        label="科目二练车场地"
      >
      </el-table-column>
      <el-table-column
        prop="school_subject_three"
        label="科目三练车场地"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-row>
            <el-button icon="el-icon-edit" type="primary" size="small" @click.prevent="edit(scope.$index, tableData)">编辑</el-button>
            <el-button class="iconfont iconicon_delete" type="danger" size="small" @click.prevent="del(scope.$index, tableData)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import {schoolList, delSchool} from '@/api/school'
    export default {
        name: "list",
        inject: ['reload'],
        data () {
            return {
                loading: true,
                tableData: [],
            };
        },
        methods: {
          translateData(objArr) {
             let data = [];
              data.push(objArr.map(item => item.address));
              return data.join(',');
          },
          edit(index, data) {
              var school_id = data[index].id;
              this.$router.push( {path: '/school/edit', query: {school_id: school_id}});
          },
          del(index, data) {
              this.$confirm('此操作会永久删除该分校,可能导致部分学员无法正常使用小程序,是否继续?','提示',{
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
              }).then( () => {
                  //如果点击了确定 则执行的逻辑
                  delSchool({school_id: data[index].id}).then(response => {
                      this.$message.success(response.msg);
                      this.reload();
                  }).catch( err => {

                  })
              })
          }
        },
        mounted() {
            schoolList().then(response => {
                this.loading = false;
                //获取然后进行数据的渲染
                if (response.data.length > 0) {
                    let list = response.data;
                    var the = this;
                    list.forEach(function (item, index, arr) {
                        let row  = {};
                        row.id = item.id;
                        row.school_name = item.name;
                        row.school_address = item.address;
                        row.school_subject_two = the.translateData(item.subject_two);
                        row.school_subject_three = the.translateData(item.subject_three);
                        row.school_subject_two  = row.school_subject_two ? row.school_subject_two : '无';
                        row.school_subject_three  = row.school_subject_three ? row.school_subject_three : '无';
                        the.tableData.push(row);
                    });
                }
            }).catch( (error) => {
                this.loading = false;
            })
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    min-width: 100%;
    width: 100%;
    overflow: hidden;

    .el-header {
      width:90%;
      max-width: 90%;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 0px auto;
      h3 {
        font-size: 20px;
        text-align: center;
        height: 20px;
        line-height: 20px;
      }
    }

    .el-table {
      width: 90%;
      max-width: 90%;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
      margin-top: 10px;
    }
  }
</style>
